<template>
    <div>
        <cu-navbar>
            <block slot="content">利铭利众商城</block>
        </cu-navbar>
        <view class="product-page page">
            <u-empty
                v-if="!list.length"
                mode="list"
                text="暂无商品"
            />
            <div class="product-list">
                <u-row gutter="10">
                    <u-col span="6" v-for="(item,index) in list" :key="index">
                        <div class="product-item" @click="toDetail(item)">
                            <u-image :src="item.image" width="100%" height="300rpx"></u-image>
                            <div class="product-name">{{ item.name }}</div>
<!--                            <div class="product-num">-->
<!--                                库存：{{ item.stock }}-->
<!--                            </div>-->
                            <div class="product-price">¥ {{ item.price }} + 金积分 {{ item.maket_price}}</div>
                        </div>
                    </u-col>
                </u-row>
        
            </div>
        
            <footer-page
                :page="page"
                :pagesize="pagesize"
                :page-size="pageSize"
                :page-total="pageTotal"
                @pre="pagePre"
                @next="pageNext"
            ></footer-page>
        </view>
    </div>
</template>

<script>
	import footerPage from "@/components/footer-page/index.vue";
	import page from '@/mixins/page'
	export default {
			  components: {
			    footerPage,
			  },
			  mixins: [page],
		data() {
			return {
				list: [
				]
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
		this.page = 1
			this.getList()
		},
		methods: {
			getList() {
				this.$api.productList({
					pageCount: this.page,
					pageSize: this.pagesize,
				}).then(res => {
					this.list = res.result.items
					this.pageTotal = res.result.pageTotal
					this.pageSize = res.result.pageSize
					uni.stopPullDownRefresh()
				})
			},
        toDetail(item) {
            uni.navigateTo({
                url: '/pages/product/detail?id='+ item.id
            });
        },
		}
	}
</script>

<style lang="scss">
	.product-page {
		.page-footer {
			bottom: 100rpx !important;
		}
		.product-list {
			padding: 30rpx;
		}

		.product-item {
			border-radius: 12rpx;
			overflow: hidden;
			background-color: #fff;
			padding: 5px;
			margin-bottom: 10rpx;

			.product-name {
				margin: 10rpx 0;
				padding: 0 10rpx;
			}

			.product-num {
				margin: 10rpx 0;
				padding: 0 10rpx;
				word-wrap: break-word;
			}

			.product-price {
				color: #f6220c;
				padding: 0 10rpx;
			}

			.button {
				background-color: rgb(255, 68, 59);
				color: #fff;
				text-align: center;
				line-height: 60rpx;
				border-radius: 4px;
				margin: 10rpx;
			}
		}
	}
</style>
